<!DOCTYPE html><html><head>
      <title>02-es6</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Renyc\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.8\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc{padding:0 16px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p,html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div{display:inline}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  300px/2);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="2ecmascript-6">2.ECMAScript 6</h1>

<p>ECMAScript 6&#x7B80;&#x79F0;ES6&#xFF0C;&#x662F;Javascript&#x7684;&#x4E0B;&#x4E00;&#x4EE3;&#x6807;&#x51C6;&#xFF0C;&#x4E8E;2015&#x5E74;6&#x6708;&#x53D1;&#x5E03;&#x3002;&#x76EE;&#x524D;&#x5404;&#x5927;&#x6D4F;&#x89C8;&#x5668;&#x5DF2;&#x7ECF;&#x652F;&#x6301;ES6&#x6807;&#x51C6;&#x3002;&#x8BB8;&#x591A;Javascript&#x5E93;&#x5DF2;&#x7ECF;&#x4F7F;&#x7528;ES6&#x3002;ES6&#x6807;&#x51C6;&#x4F7F;Javascript&#x8BED;&#x6CD5;&#x66F4;&#x52A0;&#x4E25;&#x8C28;&#xFF0C;Javascript&#x8BED;&#x8A00;&#x4E5F;&#x66F4;&#x50CF;Java&#x8BED;&#x8A00;&#x3002;</p>
<p>EC6&#x7ED9;Javascript&#x589E;&#x52A0;&#x4E86;&#x8BB8;&#x591A;&#x65B0;&#x7684;&#x7279;&#x6027;&#xFF0C;&#x4E0B;&#x9762;&#x5C06;&#x4ECB;&#x7ECD;EC6&#x7684;&#x4E00;&#x4E9B;&#x7279;&#x6027;&#x3002;</p>
<h2 class="mume-header" id="21-let%E5%91%BD%E4%BB%A4">2.1 let&#x547D;&#x4EE4;</h2>

<p>&#x5728;ES6&#x4E2D;&#xFF0C;let&#x7528;&#x6765;&#x5B9A;&#x4E49;&#x53D8;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;&#x7684;&#x8BED;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
</pre><p>Javascript&#x4E2D;&#xFF0C;&#x901A;&#x5E38;&#x4F7F;&#x7528;var&#x6765;&#x5B9A;&#x4E49;&#x53D8;&#x91CF;&#xFF0C;var&#x4E5F;&#x53EF;&#x4EE5;&#x7701;&#x7565;&#x3002;&#x4F8B;&#x5982;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
</pre><p>&#x8FD9;&#x4E24;&#x4E2A;&#x5B9A;&#x4E49;&#x90FD;&#x662F;&#x5408;&#x6CD5;&#x7684;&#x3002;var&#x5B9A;&#x4E49;&#x53D8;&#x91CF;&#x6709;&#x4EE5;&#x4E0B;&#x7F3A;&#x70B9;&#xFF1A;</p>
<ol>
<li>&#x4F5C;&#x7528;&#x57DF;&#x95EE;&#x9898;<br>
var&#x5B9A;&#x4E49;&#x7684;&#x53D8;&#x91CF;&#x5E76;&#x6CA1;&#x6709;&#x4E25;&#x683C;&#x7684;&#x4F5C;&#x7528;&#x57DF;&#x5B9A;&#x4E49;&#x3002;&#x4F8B;&#x5982;&#x4E0B;&#x9762;&#x4EE3;&#x7801;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token punctuation">{</span>
    <span class="token keyword keyword-var">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
</pre><p>&#x5C3D;&#x7BA1;&#x53D8;&#x91CF;a&#x5B9E;&#x5728;&#x82B1;&#x62EC;&#x53F7;&#x5185;&#x5B9A;&#x4E49;&#x7684;&#x5C40;&#x90E8;&#x53D8;&#x91CF;&#xFF0C;&#x4F46;&#x662F;&#x5728;&#x82B1;&#x62EC;&#x53F7;&#x5916;&#x53D8;&#x91CF;a&#x4ECD;&#x7136;&#x53EF;&#x4EE5;&#x8C03;&#x7528;&#x3002;<br>
&#x5728;&#x5F88;&#x591A;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x6211;&#x4EEC;&#x5E0C;&#x671B;&#x53D8;&#x91CF;&#x53EA;&#x5728;&#x5C40;&#x90E8;&#x4F5C;&#x7528;&#x57DF;&#x5185;&#x6709;&#x6548;&#xFF0C;&#x53EF;&#x4EE5;&#x907F;&#x514D;&#x53D8;&#x91CF;&#x88AB;&#x8BEF;&#x7528;&#x3002;<br>
2) &#x53D8;&#x91CF;&#x63D0;&#x5347;&#x95EE;&#x9898;<br>
javascript&#x5141;&#x8BB8;&#x53D8;&#x91CF;&#x5728;&#x5B9A;&#x4E49;&#x4E4B;&#x524D;&#x5C31;&#x53EF;&#x4EE5;&#x88AB;&#x4F7F;&#x7528;&#xFF0C;&#x53D8;&#x91CF;&#x9ED8;&#x8BA4;&#x7684;&#x503C;&#x4E3A;undefined&#x3002;&#x867D;&#x7136;&#x6CA1;&#x6709;&#x592A;&#x5927;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x4F46;&#x7834;&#x574F;&#x4E86;&#x4EE3;&#x7801;&#x7684;&#x4E25;&#x8C28;&#x6027;&#xFF0C;&#x53EF;&#x80FD;&#x5728;&#x8FD0;&#x884C;&#x65F6;&#x4F1A;&#x9020;&#x6210;&#x6F5C;&#x5728;&#x7684;&#x95EE;&#x9898;&#x3002;&#x4F8B;&#x5982;&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> b <span class="token operator">=</span> a <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
</pre><p>&#x7531;&#x4E8E;a&#x6CA1;&#x6709;&#x4E8B;&#x5148;&#x88AB;&#x521D;&#x59CB;&#x5316;&#xFF0C;b&#x7684;&#x503C;&#x4E5F;&#x662F;&#x65E0;&#x6548;&#x7684;&#x3002;&#x4F46;&#x8FD9;&#x884C;&#x4EE3;&#x7801;&#x6F5C;&#x5728;&#x7684;&#x95EE;&#x9898;&#x53EA;&#x80FD;&#x5728;&#x8FD0;&#x884C;&#x65F6;&#x624D;&#x4F1A;&#x66B4;&#x9732;&#x51FA;&#x6765;&#x3002;</p>
<p>let&#x5B9A;&#x4E49;&#x53D8;&#x91CF;&#xFF0C;&#x4F5C;&#x7528;&#x57DF;&#x88AB;&#x9650;&#x5B9A;&#x5230;&#x4EE3;&#x7801;&#x5757;&#x4E2D;&#x3002;&#x4E00;&#x4E2A;&#x4EE3;&#x7801;&#x5757;&#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x5BF9;&#x82B1;&#x62EC;&#x53F7;&#x62EC;&#x8D77;&#x6765;&#x7684;&#x533A;&#x57DF;&#x3002;&#x4F8B;&#x5982;&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x662F;&#x6709;&#x95EE;&#x9898;&#x7684;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token punctuation">{</span>
    <span class="token keyword keyword-let">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
</pre><p>&#x5728;&#x8FD0;&#x884C;&#x5230;console.log(a)&#x8BED;&#x53E5;&#x65F6;&#xFF0C;&#x7CFB;&#x7EDF;&#x4F1A;&#x62A5;&#x51FA;&#xFF1A;a is not defined&#x7684;&#x9519;&#x8BEF;&#x3002;<br>
&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4EE3;&#x7801;&#x5757;&#x5185;&#x90E8;&#x7684;&#x5C40;&#x90E8;&#x53D8;&#x91CF;&#x5C31;&#x4E0D;&#x4F1A;&#x6C61;&#x67D3;&#x5176;&#x4ED6;&#x533A;&#x57DF;&#x7684;&#x4EE3;&#x7801;&#x3002;</p>
<h2 class="mume-header" id="22-const">2.2 const</h2>

<p>&#x5728;C++&#x3001;Java&#x7B49;&#x8BED;&#x8A00;&#x4E2D;&#xFF0C;const&#x7528;&#x6765;&#x5B9A;&#x4E49;&#x4E0D;&#x53EF;&#x53D8;&#x7684;&#x53D8;&#x91CF;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;const&#x5B9A;&#x4E49;&#x7684;&#x53D8;&#x91CF;&#x662F;&#x4E00;&#x4E2A;&#x5E38;&#x91CF;&#x3002;</p>
<p>ES6&#x4E5F;&#x589E;&#x52A0;&#x4E86;const&#x3002;&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x5B9A;&#x4E49;&#x4E86;&#x5706;&#x5468;&#x7387;&#x7684;&#x5E38;&#x91CF;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-const">const</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token number">3.</span> <span class="token number">1415926535</span> <span class="token number">8979323846</span><span class="token punctuation">;</span>
</pre><h2 class="mume-header" id="23-%E5%87%BD%E6%95%B0%E7%9A%84%E6%89%A9%E5%B1%95">2.3 &#x51FD;&#x6570;&#x7684;&#x6269;&#x5C55;</h2>

<p>javascript&#x662F;&#x4E00;&#x79CD;&#x51FD;&#x6570;&#x662F;&#x7F16;&#x7A0B;&#x8BED;&#x8A00;&#xFF0C;&#x51FD;&#x6570;(function)&#x5728;javascript&#x4E2D;&#x5177;&#x6709;&#x91CD;&#x8981;&#x7684;&#x4F5C;&#x7528;&#x3002;ES6&#x5BF9;&#x51FD;&#x6570;&#x4E5F;&#x505A;&#x4E86;&#x6269;&#x5C55;&#x3002;&#x8FD9;&#x91CC;&#x4E3B;&#x8981;&#x4ECB;&#x7ECD;2&#x4E2A;&#x6269;&#x5C55;&#x3002;</p>
<h3 class="mume-header" id="231-%E5%87%BD%E6%95%B0%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC">2.3.1 &#x51FD;&#x6570;&#x7684;&#x9ED8;&#x8BA4;&#x503C;</h3>

<p>javascript&#x7684;&#x51FD;&#x6570;&#x4E0D;&#x5141;&#x8BB8;&#x5B9A;&#x4E49;&#x53C2;&#x6570;&#x7684;&#x9ED8;&#x8BA4;&#x503C;&#x3002;&#x4E0B;&#x9762;&#x662F;javascript&#x51FD;&#x6570;&#x7684;&#x5B9A;&#x4E49;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-function">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token parameter">arg1<span class="token punctuation">,</span> arg2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span>
</pre><p>&#x5728;ES6&#x4E2D;&#xFF0C;&#x5141;&#x8BB8;&#x4E3A;&#x51FD;&#x6570;&#x7684;&#x53C2;&#x6570;&#x5B9A;&#x4E49;&#x9ED8;&#x8BA4;&#x503C;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-function">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span>arg1<span class="token punctuation">,</span> arg2<span class="token operator">=</span><span class="token string">&quot;default_value&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span>
</pre><p>&#x8C03;&#x7528;&#x51FD;&#x6570;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x4E0D;&#x663E;&#x5F0F;&#x5730;&#x5199;&#x9ED8;&#x8BA4;&#x53C2;&#x6570;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x91CD;&#x65B0;&#x5B9A;&#x4E49;&#x9ED8;&#x8BA4;&#x53C2;&#x6570;&#x3002;&#x4E0B;&#x9762;&#x7684;&#x8C03;&#x7528;&#x90FD;&#x662F;&#x5408;&#x6CD5;&#x7684;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token function">fun1</span><span class="token punctuation">(</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fun1</span><span class="token punctuation">(</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;new_value&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x51FD;&#x6570;&#x7684;&#x9ED8;&#x8BA4;&#x53C2;&#x6570;&#x4E00;&#x822C;&#x90FD;&#x662F;&#x5728;&#x53C2;&#x6570;&#x5217;&#x8868;&#x6700;&#x540E;&#x3002;&#x4F46;ES6&#x5E76;&#x6CA1;&#x6709;&#x5F3A;&#x5236;&#x8981;&#x6C42;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x9ED8;&#x8BA4;&#x53C2;&#x6570;&#x53EF;&#x4EE5;&#x4E0D;&#x5728;&#x53C2;&#x6570;&#x5217;&#x8868;&#x672B;&#x5C3E;&#x3002;&#x4F8B;&#x5982;&#x4E0B;&#x9762;&#x7684;&#x5B9A;&#x4E49;&#x4E5F;&#x662F;&#x5408;&#x6CD5;&#x7684;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-function">function</span> <span class="token function">fun2</span><span class="token punctuation">(</span>arg1<span class="token operator">=</span><span class="token string">&quot;default_value&quot;</span><span class="token punctuation">,</span>arg2<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x4F46;&#x5728;&#x8C03;&#x7528;&#x65F6;&#x9700;&#x8981;&#x4E3A;arg1&#x8D4B;&#x503C;&#x3002;&#x8C03;&#x7528;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token function">fun2</span><span class="token punctuation">(</span><span class="token string">&quot;new_value&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;arg2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x5982;&#x679C;&#x8981;&#x4F7F;&#x7528;arg1&#x7684;&#x9ED8;&#x8BA4;&#x503C;&#xFF0C;&#x9700;&#x8981;&#x4E3A;arg1&#x4F20;&#x5165;undefined&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token function">fun2</span><span class="token punctuation">(</span><span class="token keyword nil keyword-undefined">undefined</span><span class="token punctuation">,</span> <span class="token string">&quot;arg2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h3 class="mume-header" id="232-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0">2.3.2 &#x7BAD;&#x5934;&#x51FD;&#x6570;</h3>

<p>ES6&#x5141;&#x8BB8;&#x4F7F;&#x7528;&#x7BAD;&#x5934;&#x201C;=&gt;&#x201D;&#x6765;&#x5B9A;&#x4E49;&#x51FD;&#x6570;&#x3002;<br>
&#x6211;&#x4EEC;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x8FD4;&#x56DE;&#x53C2;&#x6570;&#x503C;&#x5F97;&#x51FD;&#x6570;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-return">return</span> v<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><p>&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x4E5F;&#x53EF;&#x4EE5;&#x5199;&#x6210;&#x5982;&#x4E0B;&#x7684;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token parameter">v</span> <span class="token arrow operator">=&gt;</span> v<span class="token punctuation">;</span>
</pre><p>&#x7BAD;&#x5934;&#x201C;=&gt;&#x201D;&#x524D;&#x9762;&#x7684;v&#x4E3A;&#x51FD;&#x6570;&#x7684;&#x53C2;&#x6570;&#xFF0C;&#x201C;=&gt;&#x201D;&#x540E;&#x9762;&#x7684;v&#x4E3A;&#x8FD4;&#x56DE;&#x503C;&#x3002;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7701;&#x7565;&#x4E86;&#x8FD4;&#x56DE;&#x503C;&#x3002;<br>
&#x53EF;&#x4EE5;&#x770B;&#x51FA;&#xFF0C;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x5B9A;&#x4E49;&#x7684;&#x51FD;&#x6570;&#x66F4;&#x52A0;&#x7B80;&#x6D01;&#x3002;</p>
<p>&#x5982;&#x679C;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x6CA1;&#x6709;&#x53C2;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x5199;&#x4E3A;&#x4E00;&#x4E2A;&#x7A7A;&#x62EC;&#x53F7;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token number">3</span><span class="token punctuation">;</span>
</pre><p>&#x6211;&#x4EEC;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x6C42;&#x548C;&#x51FD;&#x6570;sum&#x7684;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF0C;sum&#x6709;2&#x4E2A;&#x53C2;&#x6570;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
</pre><p>&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x51FD;&#x6570;&#x4F53;&#x53EF;&#x4EE5;&#x7528;&#x82B1;&#x62EC;&#x53F7;&#x62EC;&#x8D77;&#x6765;&#xFF0C;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-return">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><p>&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7B80;&#x5316;&#x4E86;&#x51FD;&#x6570;&#x7684;&#x5B9A;&#x4E49;&#xFF0C;&#x7528;&#x4E8E;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x7B80;&#x5316;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x7684;&#x5199;&#x6CD5;&#x3002;&#x5728;Promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x5C06;&#x4F53;&#x4F1A;&#x5230;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x597D;&#x5904;&#x3002;</p>
<h2 class="mume-header" id="24-%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95">2.4 &#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55;</h2>

<p>javascript&#x7684;&#x5BF9;&#x8C61;&#x6307;JSON&#x5BF9;&#x8C61;&#x3002;ES6&#x5BF9;JOSN&#x5BF9;&#x8C61;&#x505A;&#x4E86;&#x4E00;&#x4E9B;&#x5316;&#x7B80;&#x3002;</p>
<h2 class="mume-header" id="241-%E5%B1%9E%E6%80%A7%E7%9A%84%E7%AE%80%E5%8C%96">2.4.1 &#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5316;</h2>

<p>&#x4E0B;&#x9762;&#x662F;&#x4E00;&#x4E2A;JSON&#x5BF9;&#x8C61;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> name <span class="token operator">=</span> <span class="token string">&quot;tom&quot;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-var">var</span> age <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token keyword keyword-var">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;name&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;tom&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;age&quot;</span> <span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span>
</pre><p>&#x5728;ES6&#x4E2D;&#xFF0C;&#x5BF9;&#x8C61;&#x7684;&#x5B9A;&#x4E49;&#x53EF;&#x4EE5;&#x7B80;&#x5199;&#x4E3A;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-var">var</span> name <span class="token operator">=</span> <span class="token string">&quot;tom&quot;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-var">var</span> age <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token keyword keyword-var">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">,</span>
    age
<span class="token punctuation">}</span>
</pre><p>&#x4E5F;&#x5C31;&#x662F;&#xFF1A;&#x5F53;&#x53D8;&#x91CF;&#x540D;&#x4E0E;json&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x4E00;&#x6837;&#x65F6;&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;key/value&#x5BF9;&#x7B80;&#x5199;&#x4E3A;&#x53D8;&#x91CF;&#x540D;&#x3002;</p>
<h2 class="mume-header" id="25-promise%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B">2.5 Promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;</h2>

<p><a href="https://es6.ruanyifeng.com/#docs/promise">&#x53C2;&#x8003;</a></p>
<p>Promise&#x662F;ES6&#x5B9A;&#x4E49;&#x7684;&#x4E00;&#x79CD;&#x5F02;&#x6B65;&#x7F16;&#x7A0B;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x662F;&#x5BF9;&#x4F20;&#x7EDF;&#x5F02;&#x6B65;&#x7F16;&#x7A0B;&#x201C;&#x56DE;&#x8C03;-&#x4E8B;&#x4EF6;&#x201D;&#x6A21;&#x5F0F;&#x7684;&#x66F4;&#x5F3A;&#x5927;&#x7684;&#x5C01;&#x88C5;&#x3002;Promise&#x662F;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;&#xFF0C;&#x91CC;&#x9762;&#x4FDD;&#x5B58;&#x7740;&#x672A;&#x6765;&#x624D;&#x4F1A;&#x7ED3;&#x675F;&#x7684;&#x4E8B;&#x4EF6;&#x3002;Promise&#x76D1;&#x63A7;&#x5F02;&#x6B65;&#x6D88;&#x606F;&#xFF0C;&#x63D0;&#x4F9B;&#x53EF;&#x9760;&#x7684;&#x5F02;&#x6B65;&#x8C03;&#x7528;&#x65B9;&#x6848;&#x3002;</p>
<h3 class="mume-header" id="251-promise%E7%9A%843%E7%A7%8D%E7%8A%B6%E6%80%81">2.5.1 Promise&#x7684;3&#x79CD;&#x72B6;&#x6001;</h3>

<p>Promise&#x6709;&#x4E09;&#x79CD;&#x72B6;&#x6001;&#xFF1A;</p>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:center">&#x72B6;&#x6001;</th>
<th style="text-align:center">&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:center">pending</td>
<td style="text-align:center">&#x8FDB;&#x884C;&#x4E2D;</td>
</tr>
<tr>
<td style="text-align:left">2</td>
<td style="text-align:center">fulfilled</td>
<td style="text-align:center">&#x5DF2;&#x6210;&#x529F;</td>
</tr>
<tr>
<td style="text-align:left">3</td>
<td style="text-align:center">rejected</td>
<td style="text-align:center">&#x5DF2;&#x5931;&#x8D25;</td>
</tr>
</tbody>
</table>
<p>Promise&#x7684;&#x521D;&#x59CB;&#x72B6;&#x6001;&#x4E3A;pending&#x3002;&#x5F53;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x6210;&#x529F;Promise&#x8F6C;&#x6362;&#x4E3A;fulfilled&#x72B6;&#x6001;&#x3002;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x5931;&#x8D25;&#x65F6;&#xFF0C;Promise&#x8F6C;&#x6362;&#x4E3A;rejected&#x72B6;&#x6001;&#x3002;</p>
<h3 class="mume-header" id="252-promise%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B">2.5.2 Promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;</h3>

<h4 class="mume-header" id="2521-%E5%88%9B%E5%BB%BApromise%E5%AF%B9%E8%B1%A1">2.5.2.1 &#x521B;&#x5EFA;Promise&#x5BF9;&#x8C61;</h4>

<p>&#x9996;&#x5148;&#x521B;&#x5EFA;Promise&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-const">const</span> promise <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

    <span class="token comment">//&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>

    <span class="token keyword control-flow keyword-if">if</span><span class="token punctuation">(</span> <span class="token comment">/*&#x8BF7;&#x6C42;&#x6210;&#x529F;*/</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword control-flow keyword-else">else</span><span class="token punctuation">{</span>
        <span class="token function">reject</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
</pre><p>Promise&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#x6709;1&#x4E2A;function&#x7C7B;&#x578B;&#x7684;&#x53C2;&#x6570;&#x3002;&#x8BE5;&#x53C2;&#x6570;&#x6709;2&#x4E2A;function&#x7C7B;&#x578B;&#x7684;&#x53C2;&#x6570;</p>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:center">&#x53C2;&#x6570;</th>
<th style="text-align:left">&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:center">resolve</td>
<td style="text-align:left">&#x5F02;&#x6B65;&#x5904;&#x7406;&#x6210;&#x529F;&#xFF0C;resolve&#x5C06;Promise&#x7684;&#x72B6;&#x6001;&#x8F6C;&#x6362;&#x4E3A;fullfilled&#xFF0C;&#x89E6;&#x53D1;&#x540E;&#x7EED;&#x7684;then&#x51FD;&#x6570;</td>
</tr>
<tr>
<td style="text-align:left">2</td>
<td style="text-align:center">reject</td>
<td style="text-align:left">&#x5F02;&#x6B65;&#x5904;&#x7406;&#x5931;&#x8D25;&#xFF0C;reject&#x5C06;Promise&#x7684;&#x72B6;&#x6001;&#x8F6C;&#x6362;&#x4E3A;rejected&#xFF0C;&#x89E6;&#x53D1;&#x540E;&#x7EED;&#x7684;catch&#x5904;&#x7406;&#x5F02;&#x5E38;</td>
</tr>
</tbody>
</table>
<p>Promise&#x5BF9;&#x8C61;&#x521B;&#x5EFA;&#x540E;&#xFF0C;&#x7ACB;&#x5373;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x3002;promise&#x5BF9;&#x8C61;&#x53EA;&#x8D1F;&#x8D23;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x8FC7;&#x7A0B;&#xFF0C;&#x4E0D;&#x8D1F;&#x8D23;&#x5904;&#x7406;&#x7ED3;&#x679C;&#x3002;&#x7ED3;&#x679C;&#x4EA4;&#x7531;&#x540E;&#x7EED;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x5904;&#x7406;&#x3002;</p>
<h4 class="mume-header" id="2522-promise%E7%9A%84%E5%9B%9E%E8%B0%83">2.5.2.2 Promise&#x7684;&#x56DE;&#x8C03;</h4>

<p>&#x4E0A;&#x4E00;&#x5C0F;&#x8282;&#x7684;promise&#x5BF9;&#x8C61;&#x5904;&#x7406;&#x5B8C;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x540E;&#xFF0C;&#x4F1A;&#x89E6;&#x53D1;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x6765;&#x5904;&#x7406;&#x7ED3;&#x679C;&#x3002;</p>
<p>Promise&#x56DE;&#x8C03;&#x662F;then-catch-finally&#x7ED3;&#x6784;</p>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:center">&#x53C2;&#x6570;</th>
<th style="text-align:left">&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:center">then</td>
<td style="text-align:left">&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x6210;&#x529F;&#xFF0C;&#x8D1F;&#x8D23;&#x5904;&#x7406;&#x6B63;&#x5E38;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x7ED3;&#x679C;</td>
</tr>
<tr>
<td style="text-align:left">2</td>
<td style="text-align:center">catch</td>
<td style="text-align:left">&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x5931;&#x8D25;&#xFF0C;&#x8D1F;&#x8D23;&#x6355;&#x83B7;&#x5F02;&#x5E38;</td>
</tr>
<tr>
<td style="text-align:left">3</td>
<td style="text-align:center">finally</td>
<td style="text-align:left">&#x4E0D;&#x7BA1;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x662F;&#x5426;&#x6B63;&#x5E38;&#xFF0C;&#x90FD;&#x8981;&#x6267;&#x884C;finally&#x4EE3;&#x7801;&#x5757;&#x91CC;&#x9762;&#x7684;&#x4EE3;&#x7801;</td>
</tr>
</tbody>
</table>
<p>Promise&#x7684;then-catch-finally&#x7ED3;&#x6784;&#x548C;java&#x7684;try-catch-finally&#x7ED3;&#x6784;&#x5F88;&#x76F8;&#x4F3C;&#x3002;</p>
<p>Promise&#x56DE;&#x8C03;&#x7684;&#x4EE3;&#x7801;&#x7ED3;&#x679C;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript">promise
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x6B63;&#x5E38;&#x7ED3;&#x679C;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-catch">catch</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//&#x6355;&#x83B7;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x5F02;&#x5E38;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//&#x6267;&#x884C;&#x6700;&#x540E;&#x7684;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x4E0A;&#x9762;&#x7684;&#x7ED3;&#x6784;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x7528;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7B80;&#x5199;:</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript">promise
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x6B63;&#x5E38;&#x7ED3;&#x679C;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-catch">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6355;&#x83B7;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x5F02;&#x5E38;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6267;&#x884C;&#x6700;&#x540E;&#x7684;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>then&#x6709;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x6539;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;response&#x5BF9;&#x8C61;&#x5373;&#x4E3A;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;&#x3002;<br>
&#x4ECE;then-&gt;catch-&gt;finally&#xFF0C;&#x6BCF;&#x4E00;&#x6B65;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x90FD;&#x4F1A;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x65B0;&#x7684;promise&#x5BF9;&#x8C61;&#x4F20;&#x9012;&#x5230;&#x4E0B;&#x4E00;&#x4E2A;&#x5904;&#x7406;&#x51FD;&#x6570;&#x3002;&#x4F8B;&#x5982;&#xFF0C;then&#x51FD;&#x6570;&#x6267;&#x884C;&#x5B8C;&#x4E4B;&#x540E;&#xFF0C;&#x4F1A;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;Promise&#x7C7B;&#x578B;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x5C06;&#x8BE5;&#x5BF9;&#x8C61;&#x4F20;&#x9012;&#x5230;finally&#x7684;&#x51FD;&#x6570;&#x4E0A;&#x3002;&#x56E0;&#x6B64;&#xFF0C;promise&#x7684;&#x5904;&#x7406;&#x662F;&#x4E00;&#x4E2A;&#x94FE;&#x5F0F;&#x7684;&#x4F20;&#x9012;&#x8FC7;&#x7A0B;&#x3002;</p>
<p>then&#x4E5F;&#x53EF;&#x4EE5;&#x94FE;&#x5F0F;&#x5C55;&#x5F00;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript">promise
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span> <span class="token parameter">geojson</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-return">return</span> geojson<span class="token punctuation">.</span><span class="token property-access">features</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span> <span class="token parameter">features</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-return">return</span> features<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span> <span class="token parameter">features</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x6B63;&#x5E38;&#x7ED3;&#x679C;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-catch">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6355;&#x83B7;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x5F02;&#x5E38;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6267;&#x884C;&#x6700;&#x540E;&#x7684;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x8FD9;&#x662F;&#x5904;&#x7406;geojson&#x7684;&#x4E00;&#x4E2A;&#x4F8B;&#x5B50;&#x3002;</p>
<ol>
<li>&#x7B2C;1&#x4E2A;then<br>
&#x8FD4;&#x56DE;geojson&#x7684;features&#x6570;&#x7EC4;&#x3002;</li>
<li>&#x7B2C;2&#x4E2A;then<br>
&#x63A5;&#x6536;&#x4F20;&#x9012;&#x8FC7;&#x6765;&#x7684;features&#x6570;&#x7EC4;&#xFF0C;&#x8FD4;&#x56DE;&#x6570;&#x7EC4;&#x5143;&#x7D20;&#x7684;&#x4E2A;&#x6570;&#x3002;</li>
<li>&#x7B2C;3&#x4E2A;then<br>
&#x63A5;&#x6536;&#x4E0A;&#x4E00;&#x4E2A;then&#x4F20;&#x9012;&#x7684;&#x7684;count&#x53D8;&#x91CF;&#xFF0C;&#x8F93;&#x51FA;&#x5230;&#x63A7;&#x5236;&#x53F0;&#x3002;</li>
</ol>
<h3 class="mume-header" id="253-%E6%95%B0%E6%8D%AE%E8%8E%B7%E5%8F%96%E4%B8%8E%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%E5%88%86%E7%A6%BB">2.5.3 &#x6570;&#x636E;&#x83B7;&#x53D6;&#x4E0E;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#x5206;&#x79BB;</h3>

<p>&#x5B8C;&#x6574;&#x7684;Promise&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x5904;&#x7406;&#x53EF;&#x4EE5;&#x5206;&#x4E3A;&#x4E24;&#x6B65;&#xFF1A;</p>
<ol>
<li>&#x7F51;&#x7EDC;&#x5904;&#x7406;<br>
&#x521B;&#x5EFA;promise&#x5BF9;&#x8C61;&#xFF0C;&#x53D1;&#x51FA;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#xFF0C;&#x63A5;&#x6536;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;&#x3002;</li>
<li>&#x7ED3;&#x679C;&#x5904;&#x7406;<br>
&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x7ED3;&#x679C;&#x3002;<br>
&#x4F2A;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token doc-comment comment">/**
 * 1. &#x7F51;&#x7EDC;&#x5904;&#x7406;: &#x53D1;&#x9001;&#x548C;&#x63A5;&#x6536;&#x5F02;&#x6B65;&#x8BF7;&#x6C42; 
 */</span>
<span class="token keyword keyword-const">const</span> promise <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

    <span class="token comment">//&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>

    <span class="token keyword control-flow keyword-if">if</span><span class="token punctuation">(</span> <span class="token comment">/*&#x8BF7;&#x6C42;&#x6210;&#x529F;*/</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword control-flow keyword-else">else</span><span class="token punctuation">{</span>
        <span class="token function">reject</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token doc-comment comment">/**
 * 2. &#x6570;&#x636E;&#x5904;&#x7406;: &#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7ED3;&#x679C; 
 */</span>
promise
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span> <span class="token parameter">geojson</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-catch">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6355;&#x83B7;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x5F02;&#x5E38;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x6267;&#x884C;&#x6700;&#x540E;&#x7684;&#x4EE3;&#x7801;</span>
    <span class="token spread operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x6240;&#x4EE5;&#xFF0C;Promise&#x5C06;&#x5F02;&#x6B65;&#x6570;&#x636E;&#x8BF7;&#x6C42;&#x548C;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#x5904;&#x7406;&#x4E24;&#x90E8;&#x5206;&#x5728;&#x8FDB;&#x884C;&#x4E86;&#x5265;&#x79BB;&#xFF0C;&#x6709;&#x52A9;&#x4E8E;&#x6211;&#x4EEC;&#x8BBE;&#x8BA1;&#x7ED3;&#x6784;&#x6E05;&#x6670;&#x7684;&#x4EE3;&#x7801;&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x4EE5;&#x4E00;&#x4E2A;WFS&#x7684;getFeature&#x67E5;&#x8BE2;&#x8BF7;&#x6C42;&#x4E3A;&#x4F8B;&#xFF0C;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#x5B8C;&#x6574;&#x7684;Promise&#x5F02;&#x6B65;&#x5904;&#x7406;&#x3002;</p>
<ol>
<li>&#x5B9A;&#x4E49;WFS&#x7684;getFeature&#x7684;URL&#x670D;&#x52A1;&#x5730;&#x5740;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> url <span class="token operator">=</span> <span class="token string">&quot;http://127.0.0.1/geoserver/radi/ows?service=WFS&amp;version=1.0.0&amp;request=GetFeature&amp;typeName=radi%3Acities&amp;maxFeatures=50&amp;outputFormat=application%2Fjson&quot;</span><span class="token punctuation">;</span>        
</pre><ol start="2">
<li>&#x521B;&#x5EFA;Promise&#x5BF9;&#x8C61;&#xFF0C;&#x5904;&#x7406;WFS&#x7684;&#x5F02;&#x6B65;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;<br>
&#x5728;Promise&#x7684;&#x53C2;&#x6570;&#x51FD;&#x6570;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x4F7F;&#x7528;fetch&#x53D1;&#x9001;&#x4E86;WFS&#x7684;getFeature&#x8BF7;&#x6C42;&#x3002;fetch&#x63A5;&#x6536;&#x5230;&#x8BF7;&#x6C42;&#x7ED3;&#x679C;&#x540E;&#xFF0C;&#x5728;fetch&#x7684;then&#x51FD;&#x6570;&#x4E2D;&#x8C03;&#x7528;resolve&#x51FD;&#x6570;&#xFF0C;&#x5C06;Promise&#x72B6;&#x6001;&#x8BBE;&#x7F6E;&#x4E3A;fullfilled&#xFF0C;&#x5E76;&#x5C06;&#x63A5;&#x6536;&#x5230;&#x7684;response&#x7684;&#x683C;&#x5F0F;&#x8F6C;&#x5316;&#x4E3A;json&#xFF0C;&#x4F20;&#x9012;&#x7ED9;Promise&#x7684;then&#x51FD;&#x6570;&#x3002;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> promise <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//2.1 &#x53D1;&#x9001;getFeature&#x8BF7;&#x6C42;</span>
    <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span>
    <span class="token comment">//2.2 &#x63A5;&#x6536;getFeature&#x8BF7;&#x6C42;&#x8FD4;&#x56DE;&#x7ED3;&#x679C;</span>
    <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">//2.3 &#x8BBE;&#x7F6E;promise&#x7684;&#x72B6;&#x6001;&#x4E3A;fullfilled</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><ol start="3">
<li>&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7ED3;&#x679C;<br>
&#x4F7F;&#x7528;Promise&#x7684;try-catch-finally&#x7ED3;&#x6784;&#x6765;&#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7684;&#x7ED3;&#x679C;&#x3002;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token comment">//3. &#x5904;&#x7406;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#x7ED3;&#x679C;</span>
promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//3.1 &#x8FD4;&#x56DE;geojson&#x7684;features&#x6570;&#x7EC4;</span>
    <span class="token keyword control-flow keyword-return">return</span> response<span class="token punctuation">.</span><span class="token property-access">features</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">features</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//3.2 &#x8FD4;&#x56DE;features&#x6570;&#x7EC4;&#x7684;&#x957F;&#x5EA6;</span>
    <span class="token keyword control-flow keyword-return">return</span> features<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">count</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//3.3 &#x8F93;&#x51FA;features&#x7684;&#x5143;&#x7D20;&#x4E2A;&#x6570;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow keyword-catch">catch</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//3.4 &#x6355;&#x83B7;&#x5F02;&#x5E38;&#xFF0C;&#x8F93;&#x51FA;&#x5F02;&#x5E38;&#x4FE1;&#x606F;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//3.5 &#x8C03;&#x7528;fianlly&#xFF0C;&#x8F93;&#x51FA;&#x7ED3;&#x675F;&#x4FE1;&#x606F;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">&quot;over&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x8FD9;&#x4E2A;&#x4F8B;&#x5B50;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x7684;then&#x7684;&#x94FE;&#x5F0F;&#x7ED3;&#x679C;&#x6765;&#x4F20;&#x9012;&#x4E00;&#x6B65;&#x4E00;&#x6B65;&#x7684;&#x5904;&#x7406;&#x7ED3;&#x679C;&#x3002;&#x5728;Chrome&#x6D4F;&#x89C8;&#x5668;&#x5F00;&#x53D1;&#x8005;&#x5DE5;&#x5177;&#x7684;console&#x63A7;&#x5236;&#x53F0;&#x53EF;&#x4EE5;&#x770B;&#x5230;console.log&#x7684;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x3002;</p>
<p>&#x6211;&#x4EEC;&#x4E5F;&#x53EF;&#x4EE5;&#x5C06;&#x5176;&#x4FEE;&#x6539;&#x4E3A;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF0C;&#x4EE3;&#x7801;&#x4F1A;&#x66F4;&#x52A0;&#x7B80;&#x6D01;&#x7D27;&#x51D1;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript">promise
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=&gt;</span> response<span class="token punctuation">.</span><span class="token property-access">features</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">features</span> <span class="token arrow operator">=&gt;</span> features<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">count</span> <span class="token arrow operator">=&gt;</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token arrow operator">=&gt;</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword control-flow keyword-finally">finally</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">&quot;over&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h2 class="mume-header" id="26-class%E7%B1%BB">2.6 Class&#x7C7B;</h2>

<p>javascript&#x662F;&#x51FD;&#x6570;&#x5F0F;&#x7F16;&#x7A0B;&#x8BED;&#x8A00;&#xFF0C;&#x51FD;&#x6570;&#x662F;&#x6700;&#x4E3B;&#x8981;&#x7684;&#x7ED3;&#x6784;&#x3002;javascript&#x672C;&#x8EAB;&#x6CA1;&#x6709;&#x7C7B;&#x7684;&#x6982;&#x5FF5;&#x7684;&#xFF0C;&#x8FD9;&#x548C;&#x73B0;&#x4EE3;&#x7684;&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x7684;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x6709;&#x5DEE;&#x522B;&#x3002;</p>
<p>javascript&#x4E2D;&#x4E00;&#x822C;&#x91C7;&#x7528;&#x901A;&#x8FC7;function&#x548C;prototype&#x6765;&#x6A21;&#x62DF;&#x7C7B;&#xFF0C;&#x8FD9;&#x79CD;&#x6298;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;&#x3002;</p>
<p>ES6&#x4E2D;&#x5B9A;&#x4E49;&#x4E86;&#x7C7B;&#x2014;&#x2014;Class&#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;Class&#x76F4;&#x63A5;&#x5B9A;&#x4E49;&#x7C7B;&#x3002;</p>
<h3 class="mume-header" id="261-%E7%B1%BB%E7%9A%84%E5%AE%9A%E4%B9%89">2.6.1 &#x7C7B;&#x7684;&#x5B9A;&#x4E49;</h3>

<p>ES6&#x4E2D;&#x7C7B;&#x7684;&#x5B9A;&#x4E49;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span>

<span class="token punctuation">}</span>
</pre><p>&#x4E0A;&#x8FF0;&#x4EE3;&#x7801;&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;Point&#x7684;&#x7C7B;&#x3002;&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x8F93;&#x51FA;&#x4E00;&#x4E9B;&#x5173;&#x4E8E;Point&#x7C7B;&#x7684;&#x4FE1;&#x606F;&#x3002;</p>
<ol>
<li>Point&#x7C7B;&#x7684;&#x7C7B;&#x578B;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;[typeof Point] = &quot;</span> <span class="token operator">+</span> <span class="token keyword keyword-typeof">typeof</span> <span class="token maybe-class-name">Point</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x4E0A;&#x8FF0;&#x4EE3;&#x7801;&#x7684;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x662F;&#xFF1A;<br>
<img src="./images/02/02-001.png" alt="&#x76EE;&#x5F55;&#x7ED3;&#x6784;"><br>
&#x53EF;&#x89C1;&#xFF0C;class&#x672C;&#x8D28;&#x4E0A;&#x4ECD;&#x7136;&#x662F;&#x4E00;&#x4E2A;function&#x3002;</p>
<ol start="2">
<li>Point&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;[Point === Point.prototype.constructor] = &quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token maybe-class-name">Point</span> <span class="token operator">===</span> <span class="token class-name">Point</span><span class="token punctuation">.</span><span class="token property-access">prototype</span><span class="token punctuation">.</span><span class="token property-access">constructor</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x4E3A;&#xFF1A;<br>
<img src="./images/02/02-002.png" alt="&#x76EE;&#x5F55;&#x7ED3;&#x6784;"><br>
&#x53EF;&#x89C1;&#xFF0C;Point&#x5B9E;&#x9645;&#x4E0A;&#x6307;&#x5411;&#x4E00;&#x4E2A;&#x6784;&#x9020;&#x51FD;&#x6570;&#x3002;</p>
<p>&#x5B8C;&#x6574;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x7C7B;&#x7684;&#x5B9A;&#x4E49;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

            <span class="token comment">//1. &#x5B9A;&#x4E49;&#x7C7B;</span>
            <span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>

            <span class="token punctuation">}</span>

            <span class="token keyword keyword-function">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token comment">//2. &#x8F93;&#x51FA;&#x7C7B;Point&#x7684;&#x7C7B;&#x578B;</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;[typeof Point] = &quot;</span> <span class="token operator">+</span> <span class="token keyword keyword-typeof">typeof</span> <span class="token maybe-class-name">Point</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token comment">//3. &#x8F93;&#x51FA;Point&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;[Point === Point.prototype.constructor] = &quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token maybe-class-name">Point</span> <span class="token operator">===</span> <span class="token class-name">Point</span><span class="token punctuation">.</span><span class="token property-access">prototype</span><span class="token punctuation">.</span><span class="token property-access">constructor</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="262-%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1">2.6.2 &#x521B;&#x5EFA;&#x5BF9;&#x8C61;</h3>

<p>&#x4F7F;&#x7528;new&#x6765;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> point <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h3 class="mume-header" id="263-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0">2.6.3 &#x6784;&#x9020;&#x51FD;&#x6570;</h3>

<p>class&#x542B;&#x6709;&#x4E00;&#x4E2A;constructor&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x8BE5;&#x51FD;&#x6570;&#x662F;class&#x7684;&#x9ED8;&#x8BA4;&#x51FD;&#x6570;&#xFF0C;&#x5728;&#x521B;&#x5EFA;&#x7C7B;&#x7684;&#x5BF9;&#x8C61;&#x65F6;&#x4F1A;&#x8C03;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x3002;&#x53EF;&#x4EE5;&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x8FDB;&#x884C;&#x5C5E;&#x6027;&#x7684;&#x521D;&#x59CB;&#x5316;&#x3002;<br>
&#x5728;&#x521B;&#x5EFA;<br>
&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x5B9A;&#x4E49;&#x4E86;Point&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x5E76;&#x521D;&#x59CB;&#x5316;&#x4E86;Point&#x7684;&#x5750;&#x6807;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>

    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-let">let</span> point <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x6211;&#x4EEC;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;Point&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x4E0B;&#x9762;&#x662F;&#x5BF9;&#x8C61;&#x7684;&#x4FE1;&#x606F;&#xFF1A;<br>
<img src="./images/02/02-003.png" alt="&#x76EE;&#x5F55;&#x7ED3;&#x6784;"><br>
&#x53EF;&#x4EE5;&#x770B;&#x5230;point&#x521D;&#x59CB;&#x5316;&#x4E86;&#x5C5E;&#x6027;&#x3002;</p>
<h3 class="mume-header" id="264-%E7%B1%BB%E7%9A%84%E5%B1%9E%E6%80%A7">2.6.4 &#x7C7B;&#x7684;&#x5C5E;&#x6027;</h3>

<p>&#x5C5E;&#x6027;&#x662F;&#x5BF9;&#x7C7B;&#x7684;&#x63CF;&#x8FF0;&#x3002;<br>
ES6&#x5BF9;&#x5C5E;&#x6027;&#x6CA1;&#x6709;&#x89C4;&#x5B9A;&#xFF0C;&#x901A;&#x5E38;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#x4F7F;&#x7528;&#x4E0B;&#x5212;&#x7EBF;&#x5F00;&#x5934;&#xFF0C;&#x4EE5;&#x4FBF;&#x548C;&#x5176;&#x4ED6;&#x53D8;&#x91CF;&#x533A;&#x5206;&#x5F00;&#x3002;</p>
<p>&#x7C7B;&#x7684;&#x5C5E;&#x6027;&#x6709;&#x4E24;&#x79CD;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;</p>
<ol>
<li>&#x5728;&#x7C7B;&#x4E2D;&#x5B9A;&#x4E49;<br>
&#x5728;&#x7C7B;&#x4E2D;&#x5B9A;&#x4E49;&#xFF0C;&#x5199;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#xFF0C;&#x540C;&#x65F6;&#x53EF;&#x4EE5;&#x5BF9;&#x5C5E;&#x6027;&#x53D8;&#x91CF;&#x8FDB;&#x884C;&#x521D;&#x59CB;&#x5316;&#xFF0C;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><p>&#x521B;&#x5EFA;Point&#x7684;&#x5BF9;&#x8C61;&#x540E;&#xFF0C;&#x5BF9;&#x8C61;&#x7684;&#x4FE1;&#x606F;&#x5982;&#x4E0B;&#xFF1A;<br>
<img src="./images/02/02-004.png" alt="&#x76EE;&#x5F55;&#x7ED3;&#x6784;"></p>
<ol start="2">
<li>&#x5728;constructor&#x51FD;&#x6570;&#x4E2D;&#x5B9A;&#x4E49;<br>
&#x7C7B;&#x7684;&#x5C5E;&#x6027;&#x53D8;&#x91CF;&#x5728;constructor&#x51FD;&#x6570;&#x4E2D;&#x5B9A;&#x4E49;&#x3002;&#x548C;&#x4E0A;&#x9762;&#x7684;&#x533A;&#x522B;&#x662F;&#xFF0C;&#x6570;&#x5F62;&#x53D8;&#x91CF;&#x540D;&#x524D;&#x9762;&#x8981;&#x589E;&#x52A0;this&#x3002;</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>

    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-let">let</span> point <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x7C7B;&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x597D;&#x4EE5;&#x540E;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x8C03;&#x7528;&#x3002;&#x5C5E;&#x6027;&#x8C03;&#x7528;&#x9700;&#x8981;&#x4F7F;&#x7528;this&#x6307;&#x9488;&#x3002;&#x5728;constructor&#x51FD;&#x6570;&#x4E2D;&#x521D;&#x59CB;&#x5316;&#x5C5E;&#x6027;&#x53D8;&#x91CF;&#x65F6;&#xFF0C;&#x5DF2;&#x7ECF;&#x4F7F;&#x7528;&#x4E86;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span>
</pre><p>&#x53EF;&#x4EE5;&#x4F7F;&#x7528;getter/setter&#x6765;&#x8C03;&#x7528;&#x5C5E;&#x6027;&#x53D8;&#x91CF;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

    <span class="token keyword keyword-get">get</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword keyword-set">set</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> 
<span class="token punctuation">}</span>
</pre><p>getter/setter&#x8C03;&#x7528;&#x65B9;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> point <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span><span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>point<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

point<span class="token punctuation">.</span><span class="token constant">X</span> <span class="token operator">=</span> <span class="token number">90</span><span class="token punctuation">;</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>point<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x5982;&#x4E0B;&#xFF1A;<br>
<img src="./images/02/02-005.png" alt="&#x76EE;&#x5F55;&#x7ED3;&#x6784;"></p>
<p>&#x5B8C;&#x6574;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

            <span class="token comment">//1. &#x5B9A;&#x4E49;&#x7C7B;</span>
            <span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
                _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
                _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
                <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span> 
                <span class="token punctuation">}</span>

                <span class="token keyword keyword-get">get</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token keyword keyword-set">set</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>

            <span class="token keyword keyword-function">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword keyword-let">let</span> point <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">&quot;[x]:  &quot;</span> <span class="token operator">+</span> point<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                point<span class="token punctuation">.</span><span class="token constant">X</span> <span class="token operator">=</span> <span class="token number">90</span><span class="token punctuation">;</span>
                <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">&quot;[x]:  &quot;</span> <span class="token operator">+</span> point<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="265-%E7%B1%BB%E7%9A%84%E6%96%B9%E6%B3%95">2.6.5 &#x7C7B;&#x7684;&#x65B9;&#x6CD5;</h3>

<p>&#x4EE5;&#x8BA1;&#x7B97;&#x70B9;&#x4E4B;&#x95F4;&#x8DDD;&#x79BB;&#x4E3A;&#x4F8B;&#x5B9A;&#x4E49;&#x7C7B;&#x7684;&#x65B9;&#x6CD5;:</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    <span class="token spread operator">...</span>

    <span class="token doc-comment comment">/**
     * &#x7C7B;&#x7684;&#x65B9;&#x6CD5;&#x5B9A;&#x4E49;
     */</span>
    <span class="token function">distance</span><span class="token punctuation">(</span><span class="token parameter">pt</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword control-flow keyword-return">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">sqrt</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">Y</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre><p>&#x5728;distance&#x51FD;&#x6570;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x4F20;&#x5165;&#x53E6;&#x4E00;&#x4E2A;&#x70B9;&#x5BF9;&#x8C61;&#xFF0C;&#x6765;&#x8BA1;&#x7B97;&#x4E24;&#x4E2A;&#x70B9;&#x4E4B;&#x95F4;&#x7684;&#x8DDD;&#x79BB;&#x3002;<br>
&#x7C7B;&#x7684;&#x65B9;&#x6CD5;&#x7684;&#x8C03;&#x7528;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-let">let</span> one <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword keyword-let">let</span> other <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword keyword-let">let</span> dist <span class="token operator">=</span> one<span class="token punctuation">.</span><span class="token method function property-access">distance</span><span class="token punctuation">(</span>other<span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><p>&#x5B8C;&#x6574;&#x7684;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x7C7B;&#x7684;&#x65B9;&#x6CD5;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

            <span class="token comment">//1. &#x5B9A;&#x4E49;&#x7C7B;</span>
            <span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
                _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
                _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
                <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token operator">=</span><span class="token number">0.0</span><span class="token punctuation">,</span> y<span class="token operator">=</span><span class="token number">0.0</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span> 
                <span class="token punctuation">}</span>

                <span class="token keyword keyword-get">get</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token keyword keyword-set">set</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                
                <span class="token keyword keyword-get">get</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token keyword keyword-set">set</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

                <span class="token doc-comment comment">/**
                 * &#x7C7B;&#x7684;&#x65B9;&#x6CD5;&#x5B9A;&#x4E49;
                 */</span>
                <span class="token function">distance</span><span class="token punctuation">(</span><span class="token parameter">pt</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    <span class="token keyword control-flow keyword-return">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">sqrt</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">Y</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>

            <span class="token keyword keyword-function">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword keyword-let">let</span> one <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword keyword-let">let</span> other <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span><span class="token number">39</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token keyword keyword-let">let</span> dist <span class="token operator">=</span> one<span class="token punctuation">.</span><span class="token method function property-access">distance</span><span class="token punctuation">(</span>other<span class="token punctuation">)</span><span class="token punctuation">;</span>

                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;[Distance]: &quot;</span> <span class="token operator">+</span> dist<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><h2 class="mume-header" id="27-class%E7%9A%84%E7%BB%A7%E6%89%BF">2.7 Class&#x7684;&#x7EE7;&#x627F;</h2>

<h3 class="mume-header" id="271-extends%E5%85%B3%E9%94%AE%E5%AD%97">2.7.1 extends&#x5173;&#x952E;&#x5B57;</h3>

<p>ES6&#x901A;&#x8FC7;extens&#x5173;&#x952E;&#x5B57;&#x5B9E;&#x73B0;&#x7C7B;&#x7684;&#x7EE7;&#x627F;&#x3002;<br>
&#x6211;&#x4EEC;&#x5C06;&#x5728;&#x524D;&#x9762;&#x5B9A;&#x4E49;&#x7684;Point&#x7684;&#x7C7B;&#x57FA;&#x7840;&#x4E0A;&#xFF0C;&#x6D3E;&#x751F;&#x4E00;&#x4E2A;GeoPoint&#x7C7B;&#x3002;</p>
<p>&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li>&#x6D3E;&#x751F;&#x5B50;&#x7C7B;<br>
&#x901A;&#x8FC7;extends&#x5173;&#x952E;&#x5B57;&#x4ECE;Point&#x7C7B;&#x4E2D;&#x6D3E;&#x751F;&#x51FA;GeoPoint&#x5B50;&#x7C7B;&#x3002;</li>
<li>&#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x5C5E;&#x6027;<br>
&#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x5C5E;&#x6027;_srid&#xFF0C;&#x521D;&#x59CB;&#x5316;&#x4E3A;&#x7A7A;&#x5B57;&#x7B26;&#x4E32;&#x3002;</li>
<li>&#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;<br>
&#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;constructor&#x3002;&#x5728;constructor&#x4E2D;&#x505A;2&#x4EF6;&#x4E8B;&#x3002;<br>
(1) &#x521D;&#x59CB;&#x5316;&#x7236;&#x7C7B;<br>
&#x901A;&#x8FC7;super&#x51FD;&#x6570;&#xFF0C;&#x8C03;&#x7528;&#x7236;&#x7C7B;&#x7684;constructor&#x8FDB;&#x884C;&#x7236;&#x7C7B;&#x7684;&#x521D;&#x59CB;&#x5316;&#x3002;<br>
(2) &#x521D;&#x59CB;&#x5316;&#x6D3E;&#x751F;&#x7C7B;&#x5C5E;&#x6027;<br>
&#x521D;&#x59CB;&#x5316;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x5C5E;&#x6027;this._sird</li>
</ol>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword keyword-class">class</span> <span class="token class-name">GeoPoint</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    <span class="token comment">//2.1 &#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x5C5E;&#x6027;</span>
    _srid <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> srid</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">//2.2 &#x8C03;&#x7528;&#x57FA;&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;</span>
        <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//2.3 &#x521D;&#x59CB;&#x5316;&#x6D3E;&#x751F;&#x7C7B;&#x5C5E;&#x6027;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_srid</span> <span class="token operator">=</span> srid<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre><p>&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x521B;&#x5EFA;&#x548C;&#x8C03;&#x7528;&#x4E0E;&#x666E;&#x901A;&#x7684;&#x7C7B;&#x6CA1;&#x6709;&#x533A;&#x522B;&#x3002;</p>
<h3 class="mume-header" id="272-super%E5%87%BD%E6%95%B0">2.7.2 super&#x51FD;&#x6570;</h3>

<p>ES6&#x89C4;&#x5B9A;&#xFF0C;&#x6D3E;&#x751F;&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x5FC5;&#x987B;&#x8C03;&#x7528;&#x4E00;&#x6B21;super&#x5BF9;&#x7236;&#x7C7B;&#x8FDB;&#x884C;&#x521D;&#x59CB;&#x5316;&#x3002;&#x5426;&#x5219;&#x4F1A;&#x62A5;&#x9519;&#x3002;</p>
<h2 class="mume-header" id="28-module%E6%A8%A1%E5%9D%97">2.8 Module&#x6A21;&#x5757;</h2>

<p>&#x5BF9;&#x5927;&#x578B;&#x7CFB;&#x7EDF;&#x6765;&#x8BF4;&#xFF0C;&#x5C06;&#x4EE3;&#x7801;&#x5206;&#x5272;&#x4E3A;&#x6A21;&#x5757;&#xFF0C;&#x6709;&#x52A9;&#x4E8E;&#x5BF9;&#x4EE3;&#x7801;&#x8FDB;&#x884C;&#x6761;&#x7406;&#x7684;&#x7EC4;&#x7EC7;&#x3002;</p>
<h3 class="mume-header" id="281-module%E7%9A%84%E5%AE%9A%E4%B9%89">2.8.1 Module&#x7684;&#x5B9A;&#x4E49;</h3>

<p>&#x4E00;&#x4E2A;Module&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x72EC;&#x7ACB;&#x7684;js&#x6587;&#x4EF6;&#xFF0C;&#x56E0;&#x6B64;&#x53EF;&#x4EE5;&#x6309;&#x7167;&#x529F;&#x80FD;&#x5C06;&#x76F8;&#x5173;&#x7684;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7;&#x4E3A;&#x4E00;&#x4E2A;js&#x6587;&#x4EF6;&#x3002;&#x4EC5;&#x4EC5;&#x5BF9;&#x5916;&#x66B4;&#x9732;&#x4E00;&#x4E9B;&#x9700;&#x8981;&#x5916;&#x90E8;&#x8C03;&#x7528;&#x7684;&#x63A5;&#x53E3;&#xFF0C;&#x529F;&#x80FD;&#x7684;&#x5185;&#x90E8;&#x7C7B;&#x3001;&#x51FD;&#x6570;&#x7B49;&#x5219;&#x4E0D;&#x5BF9;&#x5916;&#x66B4;&#x9732;&#xFF0C;&#x4EE5;&#x4FBF;&#x5B9E;&#x73B0;&#x4EE3;&#x7801;&#x7684;&#x9AD8;&#x5185;&#x805A;&#xFF0C;&#x4F4E;&#x8026;&#x5408;&#x3002;</p>
<p>Module&#x901A;&#x8FC7;export&#x5173;&#x952E;&#x5B57;&#x5C06;&#x63A5;&#x53E3;&#x5BFC;&#x51FA;&#xFF0C;&#x901A;&#x8FC7;import&#x5173;&#x952E;&#x5B57;&#x5BFC;&#x5165;&#x5916;&#x90E8;&#x6A21;&#x5757;&#x7684;&#x63A5;&#x53E3;&#x3002;</p>
<h3 class="mume-header" id="282-%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F">2.8.2 &#x4E25;&#x683C;&#x6A21;&#x5F0F;</h3>

<p>ES6&#x7684;&#x6A21;&#x5757;&#x81EA;&#x52A8;&#x91C7;&#x7528;&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x5728;js&#x6587;&#x4EF6;&#x5934;&#x90E8;&#x9ED8;&#x8BA4;&#x6DFB;&#x52A0;&#x4E86;&#x4E0B;&#x9762;&#x7684;&#x8BED;&#x53E5;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span>
</pre><p>&#x8FD9;&#x5C31;&#x8981;&#x6C42;&#x6A21;&#x5757;&#x7684;&#x8BED;&#x6CD5;&#x5FC5;&#x987B;&#x4E25;&#x8C28;&#xFF0C;&#x4E3B;&#x8981;&#x5305;&#x62EC;&#x4EE5;&#x4E0B;&#x51E0;&#x70B9;&#xFF1A;</p>
<ol>
<li>&#x53D8;&#x91CF;&#x5FC5;&#x987B;&#x58F0;&#x660E;&#x540E;&#x518D;&#x4F7F;&#x7528;</li>
<li>&#x51FD;&#x6570;&#x7684;&#x53C2;&#x6570;&#x4E0D;&#x80FD;&#x6709;&#x540C;&#x540D;&#x5C5E;&#x6027;&#xFF0C;&#x5426;&#x5219;&#x62A5;&#x9519;</li>
<li>&#x4E0D;&#x80FD;&#x4F7F;&#x7528;with&#x8BED;&#x53E5;</li>
<li>&#x4E0D;&#x80FD;&#x5BF9;&#x53EA;&#x8BFB;&#x5C5E;&#x6027;&#x8D4B;&#x503C;&#xFF0C;&#x5426;&#x5219;&#x62A5;&#x9519;</li>
<li>&#x4E0D;&#x80FD;&#x4F7F;&#x7528;&#x524D;&#x7F00; 0 &#x8868;&#x793A;&#x516B;&#x8FDB;&#x5236;&#x6570;&#xFF0C;&#x5426;&#x5219;&#x62A5;&#x9519;</li>
<li>&#x4E0D;&#x80FD;&#x5220;&#x9664;&#x4E0D;&#x53EF;&#x5220;&#x9664;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x5426;&#x5219;&#x62A5;&#x9519;</li>
<li>&#x4E0D;&#x80FD;&#x5220;&#x9664;&#x53D8;&#x91CF;delete prop&#xFF0C;&#x4F1A;&#x62A5;&#x9519;&#xFF0C;&#x53EA;&#x80FD;&#x5220;&#x9664;&#x5C5E;&#x6027;delete global[prop]</li>
<li>eval&#x4E0D;&#x4F1A;&#x5728;&#x5B83;&#x7684;&#x5916;&#x5C42;&#x4F5C;&#x7528;&#x57DF;&#x5F15;&#x5165;&#x53D8;&#x91CF;</li>
<li>eval&#x548C;arguments&#x4E0D;&#x80FD;&#x88AB;&#x91CD;&#x65B0;&#x8D4B;&#x503C;</li>
<li>arguments&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x53CD;&#x6620;&#x51FD;&#x6570;&#x53C2;&#x6570;&#x7684;&#x53D8;&#x5316;</li>
<li>&#x4E0D;&#x80FD;&#x4F7F;&#x7528;arguments.callee</li>
<li>&#x4E0D;&#x80FD;&#x4F7F;&#x7528;arguments.caller</li>
<li>&#x7981;&#x6B62;this&#x6307;&#x5411;&#x5168;&#x5C40;&#x5BF9;&#x8C61;</li>
<li>&#x4E0D;&#x80FD;&#x4F7F;&#x7528;fn.caller&#x548C;fn.arguments&#x83B7;&#x53D6;&#x51FD;&#x6570;&#x8C03;&#x7528;&#x7684;&#x5806;&#x6808;</li>
<li>&#x589E;&#x52A0;&#x4E86;&#x4FDD;&#x7559;&#x5B57;&#xFF08;&#x6BD4;&#x5982;protected&#x3001;static&#x548C;interface&#xFF09;</li>
</ol>
<h3 class="mume-header" id="283-%E5%AF%BC%E5%87%BA%E6%8E%A5%E5%8F%A3export">2.8.3 &#x5BFC;&#x51FA;&#x63A5;&#x53E3;(export)</h3>

<p>export&#x5BFC;&#x51FA;module&#x7684;&#x63A5;&#x53E3;&#x3002;&#x63A5;&#x53E3;&#x5B9E;&#x9645;&#x4E0A;&#x5C31;&#x662F;&#x4E00;&#x4E2A;json&#x5BF9;&#x8C61;&#x3002;<br>
&#x5BFC;&#x51FA;&#x63A5;&#x53E3;&#x7684;&#x5F62;&#x5F0F;&#x4E3A;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword module keyword-export">export</span> <span class="token exports"><span class="token punctuation">{</span>
    const_value<span class="token punctuation">,</span>
    variables<span class="token punctuation">,</span>
    <span class="token keyword keyword-function">function</span><span class="token punctuation">,</span>
    <span class="token keyword keyword-class">class</span>
<span class="token punctuation">}</span></span>
</pre><p>&#x6211;&#x4EEC;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;Geometry.js&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span>

<span class="token doc-comment comment">/**
 * &#x5BFC;&#x51FA;&#x63A5;&#x53E3;
 */</span>
<span class="token keyword module keyword-export">export</span><span class="token punctuation">{</span>
    <span class="token constant">PI</span><span class="token punctuation">,</span>
    module_name<span class="token punctuation">,</span>
    sum<span class="token punctuation">,</span>
    <span class="token maybe-class-name">Point</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">GeoPoint</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// &#x5B9A;&#x4E49;&#x5E38;&#x91CF;</span>
<span class="token keyword keyword-const">const</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token number">3.1415926</span><span class="token punctuation">;</span>
<span class="token keyword keyword-let">let</span> module_name <span class="token operator">=</span> <span class="token string">&quot;geometry module&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//&#x5B9A;&#x4E49;&#x51FD;&#x6570;</span>
<span class="token keyword keyword-function">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-return">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//&#x5B9A;&#x4E49;&#x7C7B;</span>
<span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token operator">=</span><span class="token number">0.0</span><span class="token punctuation">,</span> y<span class="token operator">=</span><span class="token number">0.0</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span> 
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-get">get</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-set">set</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword keyword-get">get</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-set">set</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">distance</span><span class="token punctuation">(</span><span class="token parameter">pt</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">sqrt</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">Y</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//&#x5B9A;&#x4E49;&#x6D3E;&#x751F;&#x7C7B;</span>
<span class="token keyword keyword-class">class</span> <span class="token class-name">GeoPoint</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _srid <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> srid</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_srid</span> <span class="token operator">=</span> srid<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre><p>&#x5728;&#x8FD9;&#x4E2A;&#x6A21;&#x5757;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x5B9A;&#x4E49;&#x4E86;&#x5E38;&#x91CF;&#x3001;&#x53D8;&#x91CF;&#x3001;&#x51FD;&#x6570;&#x548C;&#x7C7B;&#x3002;&#x7528;export&#x5C06;&#x5176;&#x5168;&#x90FD;&#x5BFC;&#x51FA;&#x6765;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword module keyword-export">export</span><span class="token punctuation">{</span>
    <span class="token constant">PI</span><span class="token punctuation">,</span>
    module_name<span class="token punctuation">,</span>
    sum<span class="token punctuation">,</span>
    <span class="token maybe-class-name">Point</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">GeoPoint</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</pre><h3 class="mume-header" id="284-%E5%AF%BC%E5%85%A5%E6%8E%A5%E5%8F%A3import">2.8.4 &#x5BFC;&#x5165;&#x63A5;&#x53E3;(import)</h3>

<p>&#x76EE;&#x524D;&#x4E3B;&#x6D41;&#x6D4F;&#x89C8;&#x5668;&#x5DF2;&#x7ECF;&#x539F;&#x751F;&#x652F;&#x6301;&#x4E86;ES6&#x7684;import&#x3002;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5199;import&#x5BFC;&#x5165;&#x6A21;&#x5757;&#x7684;&#x63A5;&#x53E3;&#x3002;&#x672C;&#x6559;&#x7A0B;&#x57FA;&#x4E8E;Google Chrome 86.0.xx&#x7248;&#x672C;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x3002;</p>
<p>&#x5728;HTML&#x9875;&#x9762;&#x4E0A;&#x5BFC;&#x5165;js&#x6587;&#x4EF6;&#x4EE3;&#x7801;&#x4E00;&#x822C;&#x4E3A;:</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./js/Geometry.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>  
</pre><p>&#x5982;&#x679C;&#x6309;&#x7167;&#x8FD9;&#x79CD;&#x6A21;&#x5F0F;import&#x6A21;&#x5757;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Point</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GeoPoint</span><span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/Geometry.js&quot;</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x62A5;&#x5982;&#x4E0B;&#x9519;&#x8BEF;</p>
<pre data-role="codeBlock" data-info class="language-"><code>Cannot use import statement outside a module
</code></pre><p>&#x539F;&#x56E0;&#x662F;ES6&#x7684;&#x8BED;&#x6CD5;&#x548C;&#x4F20;&#x7EDF;&#x7684;javascript&#x7684;&#x8BED;&#x6CD5;&#x4E0D;&#x540C;&#x3002;&#x4F7F;&#x7528;ES6&#x6A21;&#x5757;&#x9700;&#x8981;&#x5C06;type&#x8BBE;&#x7F6E;&#x4E3A;moudle&#x3002;&#x6B63;&#x786E;&#x7684;&#x8BED;&#x6CD5;&#x4E3A;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Point</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GeoPoint</span><span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/Geometry.js&quot;</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x4E0A;&#x8FF0;&#x4EE3;&#x7801;&#x4ECE;Geometry&#x6A21;&#x5757;&#x4E2D;&#x5BFC;&#x5165;&#x4E86;Point&#x548C;GeoPoint&#x4E24;&#x4E2A;&#x7C7B;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x50CF;&#x666E;&#x901A;&#x7C7B;&#x4E00;&#x6837;&#x4F7F;&#x7528;Point&#x548C;GeoPoint&#x3002;&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x521B;&#x5EFA;&#x4E86;&#x4E00;&#x4E2A;GeoPoint&#x7C7B;&#x7684;&#x5BF9;&#x8C61;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
    <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Point</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GeoPoint</span><span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/geometry.js&quot;</span><span class="token punctuation">;</span>

    <span class="token comment">//&#x4F7F;&#x7528;&#x7C7B;</span>
    <span class="token keyword keyword-let">let</span> gpt <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">GeoPoint</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span><span class="token string">&quot;EPSG:4326&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>gpt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6B64;&#x5916;&#xFF0C;&#x8FD8;&#x53EF;&#x4EE5;&#x5BFC;&#x5165;&#x548C;&#x8C03;&#x7528;Geometry&#x6A21;&#x5757;&#x7684;&#x5176;&#x4ED6;&#x5E38;&#x91CF;&#x3001;&#x53D8;&#x91CF;&#x548C;&#x51FD;&#x6570;&#x3002;&#x5B8C;&#x6574;&#x7684;&#x4EE3;&#x7801;&#x4E3A;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x5165;&#x6A21;&#x5757;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
            <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">Point</span><span class="token punctuation">,</span> <span class="token maybe-class-name">GeoPoint</span><span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/geometry.js&quot;</span><span class="token punctuation">;</span>
            <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span>sum<span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/geometry.js&quot;</span><span class="token punctuation">;</span>
            <span class="token keyword module keyword-import">import</span> <span class="token punctuation">{</span><span class="token constant">PI</span><span class="token punctuation">}</span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/geometry.js&quot;</span><span class="token punctuation">;</span>

            <span class="token comment">//&#x4F7F;&#x7528;&#x7C7B;</span>
            <span class="token keyword keyword-let">let</span> gpt <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">GeoPoint</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span><span class="token string">&quot;EPSG:4326&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">alert</span><span class="token punctuation">(</span>gpt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">//&#x4F7F;&#x7528;&#x51FD;&#x6570;</span>
            <span class="token keyword keyword-let">let</span> value <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">alert</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token comment">//&#x4F7F;&#x7528;&#x5E38;&#x91CF;</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><h3 class="mume-header" id="285-export-default%E5%AF%BC%E5%87%BA">2.8.5 export default&#x5BFC;&#x51FA;</h3>

<p>&#x524D;&#x9762;Geometry&#x6A21;&#x5757;&#x5C06;&#x53D8;&#x91CF;&#x3001;&#x51FD;&#x6570;&#x3001;&#x7C7B;&#x6DF7;&#x5728;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x4E2D;&#xFF0C;&#x5E76;&#x4E0D;&#x7B26;&#x5408;&#x9AD8;&#x5185;&#x805A;&#x4F4E;&#x8026;&#x5408;&#x7684;&#x7A0B;&#x5E8F;&#x8BBE;&#x8BA1;&#x539F;&#x5219;&#x3002;&#x6BCF;&#x4E2A;&#x6A21;&#x5757;&#x9700;&#x8981;&#x5C3D;&#x53EF;&#x80FD;&#x7684;&#x5355;&#x4E00;&#x3002;&#x672C;&#x8282;&#x6211;&#x4EEC;&#x5C06;&#x5BF9;Geometry.js&#x8FDB;&#x884C;&#x89E3;&#x8026;&#xFF0C;&#x4F7F;&#x6BCF;&#x4E2A;&#x6A21;&#x5757;&#x5C3D;&#x53EF;&#x80FD;&#x5730;&#x5355;&#x4E00;&#x3002;</p>
<p>&#x5148;&#x5C06;Geometry.js&#x7684;Point&#x7C7B;&#x548C;GeoPoint&#x5206;&#x79BB;&#x3002;<br>
&#x4E0B;&#x9762;&#x662F;Points.js&#x7684;&#x4EE3;&#x7801;&#x3002;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x4E86;export default&#x4E3A;&#x6A21;&#x5757;&#x6307;&#x5B9A;&#x4E86;&#x9ED8;&#x8BA4;&#x5BFC;&#x51FA;&#x7C7B;&#x3002;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    _y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token operator">=</span><span class="token number">0.0</span><span class="token punctuation">,</span> y<span class="token operator">=</span><span class="token number">0.0</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span> 
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-get">get</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-set">set</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span> <span class="token operator">=</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword keyword-get">get</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword keyword-set">set</span> <span class="token constant">Y</span><span class="token punctuation">(</span><span class="token parameter">y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span> <span class="token operator">=</span> y<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">distance</span><span class="token punctuation">(</span><span class="token parameter">pt</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword control-flow keyword-return">return</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">sqrt</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_x</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">pow</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_y</span><span class="token operator">-</span>pt<span class="token punctuation">.</span><span class="token constant">Y</span><span class="token punctuation">,</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</pre><p>&#x4E0B;&#x9762;&#x662F;GeoPoints.js&#x7684;&#x4EE3;&#x7801;&#x3002;&#x9996;&#x5148;&#x4ECE;Point.js&#x6A21;&#x5757;&#x4E2D;&#x5BFC;&#x5165;Point&#x7C7B;&#xFF0C;&#x7136;&#x540E;&#x7531;Point&#x7C7B;&#x6D3E;&#x751F;&#x51FA;GeoPoint&#x7C7B;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">Point</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&apos;./Point.js&apos;</span>

<span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">GeoPoint</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Point</span><span class="token punctuation">{</span>
    _srid <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> srid</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">_srid</span> <span class="token operator">=</span> srid<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</pre><p>&#x53EF;&#x4EE5;&#x50CF;&#x5176;&#x4ED6;&#x6A21;&#x5757;&#x4E00;&#x6837;&#x4F7F;&#x7528;export default&#x5BFC;&#x51FA;&#x7684;&#x6A21;&#x5757;&#x3002;&#x4E0B;&#x9762;&#x662F;&#x793A;&#x4F8B;&#x4EE3;&#x7801;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x5BFC;&#x5165;default&#x6A21;&#x5757;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">  
            <span class="token comment">//&#x5BFC;&#x5165;GeoPoint&#x6A21;&#x5757;</span>
            <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">GeoPoint</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;./js/GeoPoint.js&quot;</span><span class="token punctuation">;</span>

            <span class="token comment">//&#x4F7F;&#x7528;&#x7C7B;</span>
            <span class="token keyword keyword-let">let</span> gpt <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">GeoPoint</span><span class="token punctuation">(</span><span class="token number">116</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span><span class="token string">&quot;EPSG:4326&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">alert</span><span class="token punctuation">(</span>gpt<span class="token punctuation">.</span><span class="token constant">X</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre>
      </div>
      <div class="md-sidebar-toc">
<div class="md-toc">
<details style="padding:0;;padding-left:0px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#2ecmascript-6" class="md-toc-link"><p>2.ECMAScript 6</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#21-let&#x547D;&#x4EE4;" class="md-toc-link">
            <p>2.1 let&#x547D;&#x4EE4;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#22-const" class="md-toc-link">
            <p>2.2 const</p>

          </a></div><details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#23-&#x51FD;&#x6570;&#x7684;&#x6269;&#x5C55;" class="md-toc-link"><p>2.3 &#x51FD;&#x6570;&#x7684;&#x6269;&#x5C55;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#231-&#x51FD;&#x6570;&#x7684;&#x9ED8;&#x8BA4;&#x503C;" class="md-toc-link">
            <p>2.3.1 &#x51FD;&#x6570;&#x7684;&#x9ED8;&#x8BA4;&#x503C;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#232-&#x7BAD;&#x5934;&#x51FD;&#x6570;" class="md-toc-link">
            <p>2.3.2 &#x7BAD;&#x5934;&#x51FD;&#x6570;</p>

          </a></div>
        </div>
      </details>
    <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#24-&#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55;" class="md-toc-link">
            <p>2.4 &#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#241-&#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5316;" class="md-toc-link">
            <p>2.4.1 &#x5C5E;&#x6027;&#x7684;&#x7B80;&#x5316;</p>

          </a></div><details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#25-promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;" class="md-toc-link"><p>2.5 Promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#251-promise&#x7684;3&#x79CD;&#x72B6;&#x6001;" class="md-toc-link">
            <p>2.5.1 Promise&#x7684;3&#x79CD;&#x72B6;&#x6001;</p>

          </a></div><details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#252-promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;" class="md-toc-link"><p>2.5.2 Promise&#x5F02;&#x6B65;&#x7F16;&#x7A0B;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#2521-&#x521B;&#x5EFA;promise&#x5BF9;&#x8C61;" class="md-toc-link">
            <p>2.5.2.1 &#x521B;&#x5EFA;Promise&#x5BF9;&#x8C61;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#2522-promise&#x7684;&#x56DE;&#x8C03;" class="md-toc-link">
            <p>2.5.2.2 Promise&#x7684;&#x56DE;&#x8C03;</p>

          </a></div>
        </div>
      </details>
    <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#253-&#x6570;&#x636E;&#x83B7;&#x53D6;&#x4E0E;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#x5206;&#x79BB;" class="md-toc-link">
            <p>2.5.3 &#x6570;&#x636E;&#x83B7;&#x53D6;&#x4E0E;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#x5206;&#x79BB;</p>

          </a></div>
        </div>
      </details>
    <details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#26-class&#x7C7B;" class="md-toc-link"><p>2.6 Class&#x7C7B;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#261-&#x7C7B;&#x7684;&#x5B9A;&#x4E49;" class="md-toc-link">
            <p>2.6.1 &#x7C7B;&#x7684;&#x5B9A;&#x4E49;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#262-&#x521B;&#x5EFA;&#x5BF9;&#x8C61;" class="md-toc-link">
            <p>2.6.2 &#x521B;&#x5EFA;&#x5BF9;&#x8C61;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#263-&#x6784;&#x9020;&#x51FD;&#x6570;" class="md-toc-link">
            <p>2.6.3 &#x6784;&#x9020;&#x51FD;&#x6570;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#264-&#x7C7B;&#x7684;&#x5C5E;&#x6027;" class="md-toc-link">
            <p>2.6.4 &#x7C7B;&#x7684;&#x5C5E;&#x6027;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#265-&#x7C7B;&#x7684;&#x65B9;&#x6CD5;" class="md-toc-link">
            <p>2.6.5 &#x7C7B;&#x7684;&#x65B9;&#x6CD5;</p>

          </a></div>
        </div>
      </details>
    <details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#27-class&#x7684;&#x7EE7;&#x627F;" class="md-toc-link"><p>2.7 Class&#x7684;&#x7EE7;&#x627F;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#271-extends&#x5173;&#x952E;&#x5B57;" class="md-toc-link">
            <p>2.7.1 extends&#x5173;&#x952E;&#x5B57;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#272-super&#x51FD;&#x6570;" class="md-toc-link">
            <p>2.7.2 super&#x51FD;&#x6570;</p>

          </a></div>
        </div>
      </details>
    <details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#28-module&#x6A21;&#x5757;" class="md-toc-link"><p>2.8 Module&#x6A21;&#x5757;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#281-module&#x7684;&#x5B9A;&#x4E49;" class="md-toc-link">
            <p>2.8.1 Module&#x7684;&#x5B9A;&#x4E49;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#282-&#x4E25;&#x683C;&#x6A21;&#x5F0F;" class="md-toc-link">
            <p>2.8.2 &#x4E25;&#x683C;&#x6A21;&#x5F0F;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#283-&#x5BFC;&#x51FA;&#x63A5;&#x53E3;export" class="md-toc-link">
            <p>2.8.3 &#x5BFC;&#x51FA;&#x63A5;&#x53E3;(export)</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#284-&#x5BFC;&#x5165;&#x63A5;&#x53E3;import" class="md-toc-link">
            <p>2.8.4 &#x5BFC;&#x5165;&#x63A5;&#x53E3;(import)</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#285-export-default&#x5BFC;&#x51FA;" class="md-toc-link">
            <p>2.8.5 export default&#x5BFC;&#x51FA;</p>

          </a></div>
        </div>
      </details>
    
        </div>
      </details>
    
</div>
</div>
      <a id="sidebar-toc-btn">&#x2261;</a>
    
    
    
    
    
    
    
    
<script>
document.body.setAttribute('html-show-sidebar-toc', true)
var sidebarTOCBtn = document.getElementById('sidebar-toc-btn')
sidebarTOCBtn.addEventListener('click', function(event) {
  event.stopPropagation()
  if (document.body.hasAttribute('html-show-sidebar-toc')) {
    document.body.removeAttribute('html-show-sidebar-toc')
  } else {
    document.body.setAttribute('html-show-sidebar-toc', true)
  }
})
</script>
      
  
    </body></html>